<template>
    <view>
        <NavBar :navItems="myNavItems" :fontSize="26" :dynamicHeight="4" :indicatorWidth="30" @item-selected="onItemSelected" />

        <view class="content-container">
            <view v-for="(content, index) in contentItems" :key="index"
                  class="content-page"
                  :class="{ 
                      'active': selectedIndex === index,
                      'left': index < selectedIndex,
                      'right': index > selectedIndex
                  }">
                <view v-for="(box, boxIndex) in content.boxes" :key="boxIndex" class="content-box">
                    {{ box.title }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import NavBar from './components/xztdemoNavBar.vue'

export default {
    components: {
        NavBar
    },
    data() {
        return {
            myNavItems: ['首页', '北京同仁堂', '正官庄', '仙芝楼', '江中', 'swisses', '品牌馆'],
            selectedIndex: 0,
            contentItems: [
                {
                    boxes: [
                        { title: '首页盒子1' },
                        { title: '首页盒子2' },
                        { title: '首页盒子3' }
                    ]
                },
                {
                    boxes: [
                        { title: '北京同仁堂盒子1' },
                        { title: '北京同仁堂盒子2' }
                    ]
                },
                {
                    boxes: [
                        { title: '正官庄盒子1' },
                        { title: '正官庄盒子2' },
                        { title: '正官庄盒子3' },
                        { title: '正官庄盒子4' }
                    ]
                },
                // 添加更多内容项...
            ]
        }
    },
    methods: {
        onItemSelected(index) {
            this.selectedIndex = index;
        }
    }
}
</script>


<style lang="scss" scoped>

.content-container{  //主盒子要设置定位 然后在设置一个overflow为hidden 
    position: relative;
    width: 100%;
    height: 600rpx;
    overflow: hidden;
}

.content-page{ //子盒子  设置 绝对定位  
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(100%);
}
//active来控制显示
.content-page.active{  
    opacity: 1;
    transform: translateX(0);
}

.content-page.left{
    transform: translateX(-100%);
}

.content-page.right{
    transform: translateX(100%);
}

</style>
